<!-- 职位详情 -->
<template>
    <div class="looking-for-talent-contain">
        <div class="header-contain">
            <Header></Header>
        </div>
        <div class="wrap pt20 pb160">
            <div class="container transparent-bg flex-row-space-between">
                <div class="left-contain">
                    <div class="white-bg pt20 pb20 pl20 pr20">
                        <div class="flex-row-start">
                            <div class="job-title">
								<span class="job-name fs26 mr15">
									{{positionInfo.jobTitle}}
								</span>
                                <span class="money fs20">
                                    <span v-if="!positionInfo.salaryStart && !positionInfo.salaryEnd">面议</span>
                                    <span v-else>{{positionInfo.salaryStart}}k-{{positionInfo.salaryEnd}}k</span>
								</span>
                            </div>
                            <div class="job-see text-r">
                                <template v-if="positionInfo.time">
                                    <i class="el-icon-time mr5"></i>
                                    {{positionInfo.time}} 发布
                                </template>
                               <!-- <i class="el-icon-view ml20 mr5 fs16"></i>
                                6600-->
                            </div>
                        </div>
                        <div class="flex-row-start mt10 pb40 border-b-dashed">
                            <div class="job-detail-text">
                                <div class="flex-row-space-between">
                                    <div>
                                        <p class="mb10">工作性质：{{ positionInfo.jobNature | jobNatureFilter }}</p>
                                        <p class="mb10">学历要求：{{ positionInfo.educationDesc}}</p>
<!--                                        <p class="mb10">学历要求：{{ positionInfo.education | getEducation }}</p>-->
                                        <p class="mb10">工作地点：{{positionInfo.workAreaDesc}} - {{positionInfo.workDistrictDesc}} </p>
<!--                                        <p class="mb10">工作地点：{{positionInfo.workAreaDesc}}</p>-->
                                        <p class="mb10">招聘人数：{{positionInfo.recruitmentNumber}}</p>
                                    </div>
                                    <div>
                                        <p class="mb10">工作经验：{{positionInfo.experienceDesc}}</p>
                                        <p class="mb10">行业类别：{{positionInfo.jobCategoryDesc}}</p>
                                        <p class="mb10">年龄要求：
                                            <span v-if="!positionInfo.ageEnd">不限制</span>
                                            <span v-else>{{positionInfo.ageStart}} - {{positionInfo.ageEnd}}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="mt10">
									<span class="advantage-label pt5 pb5 pl10 pr10 border inline-block fs12 mr10"
                                          v-for="item in positionInfo.jobBright ?  positionInfo.jobBright.split(',') : []">
										{{item}}
									</span>
                                </div>
                            </div>
                            <div class="job-operating text-r">
                                <el-button class="green-btns collect-btns" @click="addPositionCollection()">
                                    <i class="el-icon-star-off fs16 mr5 green"></i>
                                    收藏
                                </el-button>
                                <br>
                                <el-button class="green-bg white collect-btns mt10" @click="addPositionApplied">
                                    投简历
                                </el-button>
                               <br>
                                <el-button class="green-bg white collect-btns mt10" @click="buildMsgRoom" v-if="this.$store.getters.accountid > 0">
                                    立即沟通
                                </el-button>
                            </div>
                        </div>
                        <div class="pt40 border-b-dashed">
                            <p class="title-label">
                                职位描述
                            </p>
                            <div v-html="positionInfo.jobDesc" class="mb20"></div>
                        </div>
                      <!--  <div class="pt40 pb40">
                            <p class="title-label">
                                发布者信息
                            </p>
                            <div class="flex-row-start">
                                <div class="img-contain mr15">
                                    <img
                                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600689368005&di=1d4fe4903381fc56631e1e2da0fd499e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1306%2F03%2Fc0%2F21608389_1370244342428.jpg"
                                        class="responsive-img-fit">
                                </div>
                                <div>
                                    <h2 class="mb15">
                                        飞鱼HR
                                        <i class="hr-icon inline-block"></i>
                                    </h2>
                                    <div class="flex-row-start">
                                        <p class="mr40">
                                            简历处理率：
                                            <span class="green">90%</span>
                                        </p>
                                        <p class="mr40">
                                            简历平均处理时长：
                                            <span class="green">1天</span>
                                        </p>
                                        <p class="mr40">
                                            最近登录时间：
                                            <span class="green">10:56:38</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                    <div class="mt40 pt20 pb20 pl20 pr20 white-bg">
                        <div class="flex-row-space-between">
                            <p class="title-label">
                                职位推荐
                            </p>
                            <a @click="getFindRecommendedPositionList">
                                换一批
                            </a>
                        </div>
                        <ul class="flex-row-space-between">
                            <li v-for="item in jobList"
                                class="job-recommend-item flex-row-start radius mb10 pt20 pb20 pl20 pr20">
                               <!-- <div class="logo-contain mr20">
                                    <img
                                        :src="item.companyLogo"
                                        class="responsive-img-fit">
                                </div>-->
                                <div class="job-recommend-text">
                                    <h2 class="black mb10 fs16 overflow-ellipsis">
                                        <router-link :to="`/internship-detail/${item.id}`" target="_blank">{{item.jobTitle}}</router-link>
                                    </h2>
                                    <p class="pink-red mb10 fs16">
                                        <span v-if="!item.salaryStart && !item.salaryEnd">面议</span>
                                        <span v-else>{{item.salaryStart}}k-{{item.salaryEnd}}k</span>
                                    </p>
                                    <p class="overflow-ellipsis">
                                        {{item.companyName}}
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="right-contain white-bg pt20 pb20 pl20 pr20" v-if="companyInfo.informationInfo">
                    <div class="text-c">
                        <div class="company-logo inline-block">
                            <img
                                :src="(companyInfo.informationInfo.companyLogo || default_enterprise_logo)"
                                class="responsive-img-fit">
                        </div>
                        <a @click="routerLink(`/enterprise/home/${positionInfo.companyId}`)" class="black overflow-ellipsis mt20 mb40 fs16 bold pointer block">
                            {{companyInfo.informationInfo ? companyInfo.informationInfo.companyName : ''}}
                        </a>
                    </div>
                    <p class="mb20  overflow-ellipsis">
                        公司性质： <span class="black">{{companyInfo.informationInfo.companyNatureDesc}}</span>
                    </p>
                    <p class="mb20  overflow-ellipsis">
                        行业类型： <span class="black">{{companyInfo.informationInfo.belongsIndustryDesc}}</span>
                    </p>
                    <p class="mb20  overflow-ellipsis">
                        公司规模： <span class="black">{{companyInfo.informationInfo.companyScaleDesc}}</span>
                    </p>
                    <p class="mb20 overflow-ellipsis">
                        公司地点： <span class="black">{{companyInfo.informationInfo.area}}</span>
                    </p>
                    <p class="overflow-ellipsis">
                        官方网址： <span class="black">{{companyInfo.informationInfo.companyUrl}}</span>
                    </p>
                    
                    <ul class="mt30 pt30">
                        <li class="flex-row-space-between">
                            <div class="title-label">
                                热门职位
                            </div>
                          <!--  <router-link to="index.vue">
                                更多
                                <i class="el-icon-arrow-right"></i>
                            </router-link>-->
                        </li>
                        <li v-for="item in findPositionsList" class="job-recommend-item flex-row-start border-b mb20" :key="item.id">
                           <!-- <div class="logo-contain mr20">
                                <img
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600689368005&di=1d4fe4903381fc56631e1e2da0fd499e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1306%2F03%2Fc0%2F21608389_1370244342428.jpg"
                                    class="responsive-img-fit">
                            </div>-->
                            <div class="job-recommend-text">
                                <div class="mb10 flex-row-space-between">
									<router-link :to="`/internship-detail/${item.id}`" class="job-name inline-block fs16 black overflow-ellipsis" :title="item.jobTitle">
										{{item.jobTitle}}
									</router-link>
                                    <span class="job-money inline-block pink-red mb10 fs16 overflow-ellipsis" :title="`${item.salaryStart}K - ${item.salaryEnd}K`">
                                         <span v-if="!item.salaryStart && !item.salaryEnd">面议</span>
                                        <span v-else>{{item.salaryStart}}k-{{item.salaryEnd}}k</span>
									</span>
                                </div>
                                <p class="overflow-ellipsis">
                                    {{item.jobDesc ? item.jobDesc : '暂无描述' }}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

<el-dialog title="选择简历" :visible.sync="dialogFormVisible" class="add-resume" width="500px">
    <el-form :model="form" ref="form" label-width="85px" hide-required-asterisk>

        <el-select v-model="resume" placeholder="请选择简历">
            <el-option
            v-for="(item, index) in resumeList"
            :key="index"
            :label="item.resumeName"
            :value="index">
            </el-option>
        </el-select>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <!-- <button @click="showAddDialog(false , 3)" class="cancel">取 消</button> -->
        <button @click="resumeSure()" class="sure">确 定</button>
    </div>
</el-dialog>

        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import {companyDetail, getCompanyBasicsInfoById, getCompanyPositionDetail, getJobInfo} from "@/api/enterprise";
import { findResumes } from '@/api/me/account'
import {getResume} from '@/api/me/resume'
import moment from "moment";
import {addPositionApplied, findRecommendedPositionList} from "@/api/jobs";
import {addPositionCollection, buildMsgRoom} from "@/api/base";
import {checkResponse} from "@/utils";
import default_enterprise_logo from '@/assets/image/default_enterprise_logo.jpg'
export default {
    name: 'InternshipDetail',
    data() {
        return {
            default_enterprise_logo : default_enterprise_logo,
            hotKeys: ['销售', 'java', '人事会计', 'UI平面设计', '行政web', '前端', '房地产'],
            workExperience: [
                '形象好',
                '气质佳',
                '能出差',
                '很幽默',
                '技术精悍',
                '有亲和力',
                '高学历',
                '经验丰富',
                '能加班',
                '海归',
                '会开车',
                '口才好',
                '声音甜美',
                '诚实守信',
                '外语好',
                '性格开朗',
                '有上进心',
                '人脉广',
                '知识丰富',
                '多才多艺'
            ],
            workExperienceActive: 'all',
            resumeLabel: [
                '形象好',
                '气质佳',
                '能出差',
                '很幽默',
                '技术精悍',
                '有亲和力',
                '高学历',
                '经验丰富',
                '能加班',
                '海归',
                '会开车',
                '口才好',
                '声音甜美',
                '诚实守信',
                '外语好',
                '性格开朗',
                '有上进心',
                '人脉广',
                '知识丰富',
                '多才多艺'
            ],
            resumeLabelActive: 'all',
            sexData: [
                {value: '性别', label: '性别'},
                {value: '男', label: '男'},
                {value: '女', label: '女'}
            ],
            sexSelect: '性别',
            ageData: [
                {value: '18', label: '18'},
                {value: '20', label: '20'},
                {value: '22', label: '22'}
            ],
            ageSelect: '22',
            id: this.$route.params.id,
            positionInfo: {},
            jobList: [],
            findPositionsList: [],
            companyInfo: {},
            dialogFormVisible: false,
            form:{
                resumeName:'',
                isPublic: 1,
                type: 1,
                attachmentId:'',
                attachmentName: '',
                defaultSwitch: false,
            },
            resume: '',
            resumeList: '',
        }
    },
    components: {
        Header,
        Footer
    },
    watch: {
        $route() {
            this.id = this.$route.params.id
            this.getTheCompanyPositionDetail();
            this.getFindRecommendedPositionList();
        }
    },
    created() {
        this.getTheCompanyPositionDetail();
        this.getFindRecommendedPositionList();
    },
    filters: {
        getEducation(val) {
            switch (val) {
                case 0:
                    return '无要求';
                case 1:
                    return '小学';
                case 2:
                    return '初中';
                case 3:
                    return '高中';
                case 4:
                    return '本科';
                case 5:
                    return '硕士';
                case 6:
                    return '博士';
            }
        },
        jobNatureFilter(val) {
            let obj = {
                1: '全职',
                2: '实习'
            }
            return obj[val]
        }
    },
    methods: {
        getTheCompanyPositionDetail() {
            getCompanyPositionDetail({id: this.id}).then(res => {
                this.positionInfo = res.datas;
                this.positionInfo.time = res.datas.createTime ? moment(res.datas.createTime).format('MM-DD HH:mm:ss') : ''
                this.getCompanyDetail(res.datas.companyId);
                this.getJobInfo(res.datas.companyId);
            })
        },
        getFindRecommendedPositionList() {
            findRecommendedPositionList({limit: 10, page: this.requestData.page}).then(res => {
                this.jobList = res.data;
            })
        },
        getCompanyDetail(id) {
            getCompanyBasicsInfoById({id: id}).then(res => {
                this.companyInfo = res.datas
            });
        },
        addPositionCollection() {
            addPositionCollection({accountId: "", positionId: this.id}).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('收藏成功');
                }
            })
        },
        addPositionApplied(positionId){
            let data = {
                positionId: this.id,
                resumeId: 5,
                resumeSource: '',
                statusTag: ''
            }
            addPositionApplied(data).then(res => {
                if (checkResponse(res, true)) {
                    this.$message.success('申请成功');
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getJobInfo(id) {
            getJobInfo({limit: 10, page: 1, companyId: id}).then(res=>{
                this.findPositionsList = res.data;
            });
        },
        buildMsgRoom(){
            this.dialogFormVisible = true;

            findResumes({ "limit": 10, "page": 1 }).then(res => {
                // console.log(res.data);
            //    this.resumeList = res.data;
var ary = new Array()
for (let i = 0; i < res.data.length; i++) {
    let array = res.data;
    
    if(array[i].complete > 25 && array[i].isPublic == 1){
        ary.push(array[i])
    }
}
this.resumeList = ary

            }).catch(err => {
                this.$message.error(err);
            })

            
        },

        resumeSure(){
            this.$refs.form.validate(valid => {
                if (valid) {
                //   console.log(this.resume);
                //   console.log(this.resumeList[this.resume]);
                console.log(this.resumeList.length);

    if(this.resumeList.length == 0){
        this.dialogFormVisible= false;
        return
    }

                    let jsonData = {
                        accountId: this.$store.getters.accountid,
                        accountName: this.$store.getters.nickname,
                        positionId : this.$route.params.id,
                        positionName: this.positionInfo.jobTitle,
                        companyId  : this.positionInfo.companyId,
                        companyName: this.companyInfo.informationInfo.companyName,
                        resumeId: this.resumeList[this.resume].id,
                        resumeName: this.resumeList[this.resume].resumeName
                    }
                    getResume({id: this.resumeList[this.resume].id}).then(res => {
                        jsonData.accountName = res.datas.resumeInfos[0].name;
                        buildMsgRoom(jsonData).then(res => {
                           window.location.href = '/account/chats-detail/'+res.datas.id+'?companyName='+jsonData.companyName+'&positionName='+jsonData.positionName
                        });
                    }).catch(err => {
                        this.$message.error(err);
                    })

                  
                }
            })
        },
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.header {
    >>>.top{
        background: rgba(59, 77, 102, 1)
    }
    >>>.nav {
        background: rgba(67, 87, 114, 1)
    }
}
</style>
<style lang="scss">
@import url('../../assets/styles/enterprise/common.css');

.el-select-dropdown__item.selected {
    color: #BE485E !important;
}

.pb160 {
    padding-bottom: 160px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3EACC4;
}

.looking-for-talent-contain {
    .textarea-text {
        min-height: 400px;
        width: 100%;
        overflow-y: visible;
        resize: none;
        border-width: 0px;
        outline: none;
    }

    .title-label {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #3DABC3;
        border-left: 4px solid #3DABC3;
        padding-left: 10px;
        margin-bottom: 30px;
    }

    .border-b-dashed {
        border-bottom: 1px dashed #E0E0E0;
    }

    .green-btns {
        color: #3DABC3;
        border: 1px solid #3DABC3;
    }

    .green {
        color: #3DABC3;
    }

    .green-bg {
        background-color: #3DABC3 !important;
    }

    .pink-red {
        color: #CD395B;
    }

    .wrap {
        background: #F7F7F7;

        .transparent-bg {
            background: transparent !important;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            background: #fff;

            .c666 {
                color: #666;
            }

            .money {
                color: #BE485E;
            }

            .left-contain {
                width: 820px;

                .job-title {
                    width: 50%;

                    .job-name {
                        color: #111;
                    }

                    .money {
                        color: #CD395B;
                    }
                }

                .job-see {
                    width: 50%;
                    color: #999;
                }

                .job-detail-text {
                    width: 450px;
                    color: #777777;

                    .advantage-label {
                        background-color: #E7E7E7;
                        color: #777777;
                    }
                }

                .job-operating {
                    width: 330px;

                    .collect-btns {
                        width: 108px;
                    }
                }

                .hr-icon {
                    width: 20px;
                    height: 20px;
                    background: url('../../assets/image/enterprise/hr.png') no-repeat;
                    background-size: 100% 100%;
                }

                .img-contain {
                    width: 60px;
                    height: 60px;
                }

                .job-recommend-item {
                    width: 380px;
                    height: 110px;
                    border: 1px solid #E7E7E7;

                    .logo-contain {
                        width: 65px;
                        height: 65px;
                    }

                    .job-recommend-text {
                        width: 250px;
                    }
                }
            }

            .right-contain {
                width: 360px;
                min-height: 990px;

                .company-logo {
                    width: 80px;
                    height: 80px;
                }

                .job-recommend-item {
                    width: 320px;
                    height: 80px;

                    .logo-contain {
                        width: 65px;
                        height: 65px;
                    }

                    .job-recommend-text {
                        width: 195px;

                        .job-name {
                            width: 120px;
                        }

                        .job-money {
                            width: 75px;
                        }
                    }
                }
            }
        }
    }
}
</style>
